<template>
	<view class="resume">
		<view class="resume-step">
			<uni-steps :options="list1" :active="active" />
		</view>

		<view v-show="active===0">
			<uni-section title="基础信息" type="line"></uni-section>

			<uni-forms ref="baseForm" :modelValue="responseInfo" label-width="70px">
				<uni-forms-item label="头像">
					<view @click="goto(1)">
						<star-avatar :imageUrl="responseInfo.avatar"></star-avatar>
					</view>
				</uni-forms-item>
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="responseInfo.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="用户昵称">
					<uni-easyinput v-model="responseInfo.nickname" placeholder="请输入用户昵称" />
				</uni-forms-item>
				<uni-forms-item label="性别">
					<uni-data-checkbox v-model="responseInfo.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="出生日期">
					<uni-datetime-picker type="date" return-type="timestamp" v-model="responseInfo.birthday" />
				</uni-forms-item>
				<uni-forms-item label="学历">
					<uni-data-select v-model="responseInfo.educationLevel" :localdata="educations"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="手机号">
					<uni-easyinput v-model="responseInfo.mobile" placeholder="请输入手机号" />
				</uni-forms-item>
				<!-- <uni-forms-item label="所在地">
					<uni-easyinput v-model="responseInfo.areaId" placeholder="请输入所在地" />
				</uni-forms-item> -->
				<uni-forms-item label="居住地址">
					<uni-easyinput v-model="responseInfo.address" placeholder="请输入居住地址" />
				</uni-forms-item>
				<uni-forms-item label="邮箱">
					<uni-easyinput v-model="responseInfo.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="专业技能">
					<uni-easyinput type="textarea" v-model="responseInfo.skill" placeholder="请输入专业技能" />
				</uni-forms-item>
				<uni-forms-item label="个人简介">
					<uni-easyinput type="textarea" v-model="responseInfo.profile" placeholder="请输入个人简介" />
				</uni-forms-item>
				<uni-forms-item label="自我评价">
					<uni-easyinput type="textarea" v-model="responseInfo.selfEvaluation" placeholder="请输入自我评价" />
				</uni-forms-item>
				<uni-forms-item label="参加工作时间">
					<uni-datetime-picker type="date" return-type="timestamp" v-model="responseInfo.workStartTime" />
				</uni-forms-item>
				<uni-forms-item label="期望薪资">
					<uni-row>
						<uni-col :span="11">
							<uni-easyinput v-model="responseInfo.minSalaryExpect" placeholder="请输入最低薪资" />
						</uni-col>
						<uni-col :span="2">
							<view class="SalaryExpect">-</view>
						</uni-col>
						<uni-col :span="11">
							<uni-easyinput v-model="responseInfo.maxSalaryExpect" placeholder="请输入最高薪资" />
						</uni-col>
					</uni-row>
				</uni-forms-item>
			</uni-forms>
		</view>

		<view v-show="active===1">
			<uni-section title="教育经历" type="line">
				<template v-slot:right>
					<uni-icons type="plusempty" size="16" color="#00aa00"
						@click="recruitmentEducationAdd()"></uni-icons>
				</template>
			</uni-section>

			<view v-for="(item, index) of recruitmentEducations" :key="index">
				<view class="sub-module" v-if="item.deleted==false">
					<uni-row :width="nvueWidth">
						<uni-col :span="22">
							<uni-forms :modelValue="item" label-width="70px">
								<uni-forms-item label="学校">
									<uni-easyinput v-model="item.schoolName" placeholder="请输入学校名称" />
								</uni-forms-item>
								<uni-forms-item label="专业">
									<uni-easyinput v-model="item.major" placeholder="请输入专业名称" />
								</uni-forms-item>
								<uni-forms-item label="主修课程">
									<uni-easyinput v-model="item.courses" placeholder="请输入主修课程" />
								</uni-forms-item>
								<uni-forms-item label="学历">
									<uni-data-select v-model="item.level" :localdata="educations"></uni-data-select>
								</uni-forms-item>
								<uni-forms-item label="时间">
									<!-- <uni-datetime-picker type="date" return-type="data" v-model="item.startTime" /> -->

									<view class="study-date">
										<uni-row>
											<uni-col :span="11">
												<picker mode="date" :value="item.startTime" fields="month"
													@change="bindDateChange($event, index,1)">
													<view class="uni-input">{{item.startTime}}</view>
												</picker>
											</uni-col>
											<uni-col :span="2">
												<view class="study-date-expect">-</view>
											</uni-col>
											<uni-col :span="11">
												<picker mode="date" :value="item.endTime" fields="month"
													@change="bindDateChange($event, index,2)">
													<view class="uni-input">{{item.endTime}}</view>
												</picker>
											</uni-col>
										</uni-row>
									</view>

								</uni-forms-item>
								<!-- <uni-forms-item label="结束时间">
									<uni-datetime-picker type="date" return-type="data" v-model="item.endTime" />
								</uni-forms-item> -->
							</uni-forms>
						</uni-col>
						<uni-col :span="2">
							<view class="delete-info" @click="recruitmentEducationDelete(index)">
								<uni-icons type="trash-filled" size="16" color="#ff0c1c"></uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>

		<view v-show="active===2">
			<uni-section title="工作经历" type="line">
				<template v-slot:right>
					<uni-icons type="plusempty" size="16" color="#00aa00" @click="recruitmentJobAdd()"></uni-icons>
				</template>
			</uni-section>

			<view v-for="(item, index) of recruitmentJobs" :key="index">
				<view class="sub-module" v-if="item.deleted==false">
					<uni-row :width="nvueWidth">
						<uni-col :span="22">
							<uni-forms :modelValue="item" label-width="70px">
								<uni-forms-item label="职位">
									<uni-easyinput v-model="item.position" placeholder="请输入职位名称" />
								</uni-forms-item>
								<uni-forms-item label="公司">
									<uni-easyinput v-model="item.companyName" placeholder="请输入公司名称" />
								</uni-forms-item>
								<uni-forms-item label="工作内容">
									<uni-easyinput type="textarea" v-model="item.content" placeholder="请输入工作内容" />
								</uni-forms-item>
								<uni-forms-item label="时间">
									<!-- <uni-datetime-picker type="date" return-type="data" v-model="item.startTime" /> -->

									<view class="study-date">
										<uni-row>
											<uni-col :span="11">
												<picker mode="date" :value="item.startTime" fields="month"
													@change="bindDateChange($event, index,3)">
													<view class="uni-input">{{item.startTime}}</view>
												</picker>
											</uni-col>
											<uni-col :span="2">
												<view class="study-date-expect">-</view>
											</uni-col>
											<uni-col :span="11">
												<picker mode="date" :value="item.endTime" fields="month"
													@change="bindDateChange($event, index,4)">
													<view class="uni-input">{{item.endTime}}</view>
												</picker>
											</uni-col>
										</uni-row>
									</view>

								</uni-forms-item>
								<!-- <uni-forms-item label="结束时间">
									<uni-datetime-picker type="date" return-type="data" v-model="item.endTime" />
								</uni-forms-item> -->
							</uni-forms>
						</uni-col>
						<uni-col :span="2">
							<view class="delete-info" @click="recruitmentJobDelete(index)">
								<uni-icons type="trash-filled" size="16" color="#ff0c1c"></uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>


		<button type="primary" @click="setpChange('next')" v-if="active===0">下一步</button>

		<uni-row>
			<uni-col :span="12">
				<button @click="setpChange('pre')" v-if="active>0">上一步</button>
			</uni-col>
			<uni-col :span="12">
				<button type="primary" @click="setpChange('next')" v-if="active===1">下一步</button>
				<button type="primary" @click="submit()" v-if="active==2">保存</button>
			</uni-col>
		</uni-row>

	</view>
</template>

<script>
	import {
		getRecruitmentResume,
		createOrUpdateRecruitmentResume,
		getRecruitmentEducation,
		getRecruitmentJob
	} from "@/api/hospital/star.js"

	import StarAvatar from '@/components/StarAvatar.vue'


	export default {
		components: {
			'star-avatar': StarAvatar
		},
		data() {
			return {
				active: 0,
				list1: [{
					title: '基础信息'
				}, {
					title: '教育经历'
				}, {
					title: '工作经历'
				}],
				sexs: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
				educations: [{
						value: 0,
						text: "专科",
					},
					{
						value: 1,
						text: "本科"
					},
					{
						value: 2,
						text: "硕士"
					},
				],
				responseInfo: {
					id: "",
					// memberUserId: 0,
					positionId: 0,
					address: "",
					email: "",
					skill: "",
					selfEvaluation: "",
					profile: "",
					educationLevel: 0,
					workStartTime: "",
					name: "",
					nickname: "",
					sex: 0,
					birthday: "",
					mobile: "",
					areaId: 0,
					avatar: "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
					minSalaryExpect: 0,
					maxSalaryExpect: 0,
					recruitmentEducations: [],
					recruitmentJobs: []
				},
				recruitmentEducations: [],
				recruitmentJobs: []
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				getRecruitmentResume().then(response => {
					console.log(response)
					// this.responseInfo = response.data;

					if (response.data != null) {
						this.responseInfo = response.data;
					}
				})

				getRecruitmentEducation().then(response => {
					console.log(response)
					// this.responseInfo = response.data;

					if (response.data != null) {
						this.recruitmentEducations = response.data;

						// this.recruitmentEducations.forEach(item => {
						// 	item.startTime = Number(item.startTime);
						// 	item.endTime = Number(item.endTime);
						// });
					}
				})

				getRecruitmentJob().then(response => {
					console.log(response)
					// this.responseInfo = response.data;

					if (response.data != null) {
						this.recruitmentJobs = response.data;
					}
				})
			},
			submit() {

				this.responseInfo.recruitmentEducations = this.recruitmentEducations;

				// this.responseInfo.recruitmentEducations.forEach(item => {
				// 	item.startTime = item.startTime.toString();
				// 	item.endTime = item.endTime.toString();
				// });

				this.responseInfo.recruitmentJobs = this.recruitmentJobs;
				
				// this.responseInfo.avatar = "https://img1.baidu.com/it/u=3312710284,2259447705&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800";
				
				createOrUpdateRecruitmentResume(this.responseInfo).then(response => {
					console.log(response)
					// this.responseInfo = response.data;
					this.init();
					uni.showToast({
						title: '简历保存成功',
						icon: 'none'
					});
				})
			},
			recruitmentEducationAdd() {
				this.recruitmentEducations.push({
					// createTime: "2019-08-24T14:15:22.123Z",
					// updateTime: "2019-08-24T14:15:22.123Z",
					// creator: "string",
					// updater: "string",
					deleted: false,
					// id: 0,
					// memberUserId: 0,
					schoolName: "",
					major: "",
					courses: "",
					level: 0,
					startTime: "2000.01",
					endTime: "2000.01"
				})
			},
			recruitmentEducationDelete(index) {
				this.recruitmentEducations[index].deleted = true;
			},
			recruitmentJobAdd() {
				this.recruitmentJobs.push({
					// createTime: "2019-08-24T14:15:22.123Z",
					// updateTime: "2019-08-24T14:15:22.123Z",
					// creator: "string",
					// updater: "string",
					deleted: false,
					// id: 0,
					// memberUserId: 0,
					startTime: "2000.01",
					endTime: "2000.01",
					position: "",
					companyName: "",
					content: ""
				})

			},
			recruitmentJobDelete() {
				this.recruitmentJobs[index].deleted = true;
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth().toString().padStart(2, '0');
				return `${year}.${month}`;
			},
			bindDateChange(e, index, type) {

				let t = e.detail.value.replace('-', '.');
				// console.log(t)
				// console.log(index)
				// console.log(type)

				switch (type) {
					case 1:
						this.recruitmentEducations[index].startTime = t;
						break;
					case 2:
						this.recruitmentEducations[index].endTime = t;
						break;
					case 3:
						this.recruitmentJobs[index].startTime = t;
						break;
					case 4:
						this.recruitmentJobs[index].endTime = t;
						break;
					default:
						break;
				}
			},
			setpChange(type) {
				// if (this.active < this.list1.length - 1) {
				// 	this.active += 1
				// } else {
				// 	this.active = 0
				// }

				switch (type) {
					case "pre":
						this.active -= 1
						break;
					case "next":
						this.active += 1
						break;
					default:
						break;
				}
			},
			goto(type) {
				switch (type) {
					case 1:
						this.$tab.navigateTo('/pages/mine/avatar/index')
						break;
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.resume {
		margin: 15px;
		padding-bottom: 30px;

		.resume-step {
			margin: 30px 0;
		}

		.star-avatar {
			width: 120px;
			height: 120px;
			// margin: 0 6px;
			// margin-right: 60px;

			.responsive-image {
				border-radius: 60px;
				border-color: #fff;
				border-width: 2px;
			}
		}

		.uni-forms-item {
			margin-bottom: 12rpx !important;
		}

		/* 或调整内边距 */
		.uni-forms-item__content {
			padding: 2rpx 0;
		}

		.uni-section {
			margin-bottom: 20rpx !important;
		}

		.SalaryExpect {
			width: 100%;
			text-align: center;
			padding-top: 8px;
		}

		.sub-module {
			padding: 5px 15px;
			// border: 1px solid #cbfff8;
			// background: #cbfff8;
			background-image: linear-gradient(to right, #fff 0%, #eeeeee00 25%, #eeeeee00 50%, #fff 100%);
			border-radius: 10px;
			margin-bottom: 10px;
		}

		.delete-info {
			padding: 10px;
		}

		.study-date {
			margin: 10px 0;
		}


	}
</style>